<template>
  <el-dialog
    title="生产任务单"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="70%"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    destroy-on-close
    @close="handleClose()"
    @open="handleOpen()"
  >
    <TableSelect
      ref="table"
      :data="billList"
      :selectionList.sync="selectionList"
      :selectableCallBack="selectableCallBack"
      rowKey="id"
      v-loading="tableLoading"
    >
      <el-table-column label="工单编号" prop="erpOrderNo"> </el-table-column>
      <el-table-column label="生产产品" prop="itemName"></el-table-column>
      <el-table-column label="计划产量" prop="planQuantity"></el-table-column>
      <el-table-column label="单位" prop="itemUnit"></el-table-column>
      <!-- <el-table-column
        label="所属工厂"
        prop="factoryDeptName"
      ></el-table-column>
      <el-table-column label="所属车间" prop="workshopName"></el-table-column>
      <el-table-column label="所属产线" prop="lineName"></el-table-column>
      <el-table-column label="所属班组" prop="groupName"></el-table-column> -->

      <el-table-column
        label="计划开始时间"
        prop="planStarttime"
      ></el-table-column>
      <el-table-column
        label="计划完成时间"
        prop="planEndtime"
      ></el-table-column>
      <el-table-column label="工单状态">
        <template slot-scope="{ row }">
          <span class="status-1" v-if="row.orderStatus == 'TO_CONFIRM'">{{
            cmomOrderStatusDictMap[row.orderStatus]
          }}</span>
          <span class="status-2" v-else-if="row.orderStatus == 'TO_CLOSE'">{{
            cmomOrderStatusDictMap[row.orderStatus]
          }}</span>
          <span v-else>{{ cmomOrderStatusDictMap[row.orderStatus] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="工单来源">
        <template slot-scope="{ row }">
          <span>{{ cmomOrderSourceDictMap[row.orderSource] }}</span>
        </template>
      </el-table-column>
    </TableSelect>
    <pagination
      :total="pager.total"
      :page.sync="pager.pageNum"
      :limit.sync="pager.pageSize"
      @pagination="getBillList"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">保 存</el-button>
    </span>
  </el-dialog>
</template>
<script>
import TableSelect from "@/components/TableSelect";
import { orderList } from "@/api/workOrder/confirmClose";
export default {
  components: { TableSelect },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    defaultValues: {
      type: Array,
      default: () => [],
    },
    defaultSearch: {
      type: Object,
      default: null,
    },
    // 不可选回调，返回true或false，传参为row
    selectableCallBack: {
      type: Function,
    },
  },
  dicts: ["cmomOrderSource", "cmomOrderStatus"],
  data() {
    return {
      queryParams: {
        orderStatus: "",
        factoryDeptCode: null,
        workshopId: null,
        lineId: null,
        groupId: null,
      },
      billList: [],
      selectionList: [],
      tableLoading: false,
      pager: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    cmomOrderSourceDictMap() {
      return this.dictToMap(this.dict.cmomOrderSource);
    },
    cmomOrderStatusDictMap() {
      return this.dictToMap(this.dict.cmomOrderStatus);
    },
  },
  created() {},
  methods: {
    handleClose() {},
    handleOpen() {
      if (this.defaultSearch) {
        this.queryParams = Object.assign(this.queryParams, this.defaultSearch);
      }
      this.getBillList();
      this.selectionList = this.defaultValues?.length
        ? [...this.defaultValues]
        : [];
    },
    getBillList() {
      this.loading = true;
      const param = {
        pageNum: this.pager.pageNum,
        pageSize: this.pager.pageSize,
        query: {
          ...this.queryParams,
        },
      };
      orderList(param)
        .then((res) => {
          this.billList = res.rows;
          this.pager.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.billList = [];
          this.pager.total = 0;
          this.loading = false;
        });
    },
    handleSubmit() {
      if (!this.multiple) {
        if (this.selectionList.length > 1) {
          this.$message({
            message: "最多选择一条数据!",
            type: "warning",
          });
          return;
        }
      }
      this.$emit("submit", this.selectionList);
      this.dialogVisible = false;
    },
  },
};
</script>
